<template>
    <div class="h-[100%]">
        <div class="ticket-center" :data-type="props.data.type" :data-dropid="props.data.id"
            :class="hover ? 'pause' : props.editing ? 'play' : 'pause '" @click="click">
            <!-- 标题 -->
            <h2 style="color:#fff" class="pl-[10px] pt-[5px]">工单中心</h2>
            <!-- 顶部菜单栏 -->
            <div class="tab-buttons">
                <button class="tab" :class="{ active: currentTab === 'toDo' }" @click="setTab('toDo')">我的待办</button>
                <button class="tab" :class="{ active: currentTab === 'done' }" @click="setTab('done')">我的已办</button>
                <button class="tab" :class="{ active: currentTab === 'apply' }" @click="setTab('apply')">我的申请</button>
                <button class="tab" :class="{ active: currentTab === 'order' }" @click="setTab('order')">我的工单</button>
            </div>
            <div class="contain">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <input type="text" placeholder="搜索标题、单号、及摘要" v-model="searchQuery" class="searchInput">
                    <div class="close-button" @click="resetText" v-show="searchQuery !== ''">×</div>
                    <button @click="search" class="search"><i class="iconfont icon-magnifier_icon"
                            data-v-091bd170-s=""></i>搜索</button>
                    <button @click="reset" class="reset">重置</button>
                </div>

                <!-- 数据表格 -->
                <div class="table">
                    <div class="custom-table" style="max-height:200px">
                        <table>
                            <thead style="font-size:14px;background:rgba(53, 57, 69,1);">
                                <tr>
                                    <th v-for="column in columns" :key="column.prop"
                                        :style="{ width: column.width + 'px' }">
                                        {{ column.label }}
                                    </th>
                                    <th style="width: 100px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(row, index) in currentPageData" :key="row.id"
                                    :class="index % 2 === 0 ? 'even-row' : 'odd-row'" style="font-size:12px">
                                    <td v-for="column in columns" :key="column.prop">
                                        {{ row[column.prop] }}
                                    </td>
                                    <td>
                                        <div class="detail-button" @click="handleDetail(row)">详情</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 分页控件 -->
                <div class="pagination">
                    <button :disabled="currentPage === 1" @click="handlePageChange(currentPage - 1)">
                        < </button>
                            <button :disabled="currentPage === totalPages"
                                @click="handlePageChange(currentPage + 1)">></button>
                            <span>第 {{ currentPage }} / {{ totalPages }} 页</span>
                            <div @click="handleGoToPage" class="goto">前往</div>
                            <input type="number" v-model.number="goToPage" @keyup.enter="handleGoToPage" min="1"
                                :max="totalPages" placeholder="" />

                            <span>共有 {{ tableData.length }} 条记录</span>

                </div>
            </div>

        </div>
        <div
            class="select-none icon-title overflow text-white text-center w-[100%] h-[30px] leading-[20px] pt-[8px] relative left-[-14px]">
            {{ data?.name }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, inject, ref, watchEffect, Ref, } from 'vue'
const emit = defineEmits(['changePointerEvents', "edit"]);

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
    editing: {
        default: false,
        type: Boolean,
    },
});

const draggingId = inject("draggingId") as Ref<string | null>;
const data = ref(props.data);

watchEffect(() => {
    data.value = props.data;
});
const click = () => {
    if (props.editing) {
        // 跳到编辑页面
        emit("edit", data);
    } else {
        if (draggingId.value) {
            return;
        }
    }
};
const searchQuery = ref("");
const hover = ref(false);
const search = () => {
    if (searchQuery.value) alert(searchQuery.value)

};
const reset = () => {
    searchQuery.value = "";
};
const currentTab = ref("toDo");
const setTab = (tab) => {
    currentTab.value = tab;
};
const resetText = () => {
    searchQuery.value = ""
}

// ["工单编号", "工单类型", "工单标题", "时间", "操作"]
const columns = ref([
    {
        prop: 'id',
        label: '工单编号',
        width: 120,
    },
    {
        prop: 'type',
        label: '工单类型',
        width: 120,
    }, {
        prop: 'title',
        label: '工单标题',
        width: 120,
    }, {
        prop: 'time',
        label: '时间',
        width: 180,
    }]
)
// 表格数据
const tableData = ref([
    {
        id: "XXXXXXXX",
        type: "事件工单",
        title: "xxxxxxxxxxxx",
        time: "2022-02-28 15:31:56",
    },
    {
        id: "XXXXXXXX",
        type: "变更工单",
        title: "xxxxxxxxxxxx",
        time: "2022-02-28 15:31:56",
    },
    {
        id: "XXXXXXXX",
        type: "维护工单",
        title: "xxxxxxxxxxxx",
        time: "2022-02-28 15:31:56",
    },
    {
        id: "XXXXXXXX",
        type: "事件工单",
        title: "xxxxxxxxxxxx",
        time: "2022-02-28 15:31:56",
    },
    {
        id: "XXXXXXXX",
        type: "变更工单222",
        title: "xxxxxxxxxxxx",
        time: "2022-02-28 15:31:56",
    },
    {
        id: "XXXXXXXX",
        type: "维护工单",
        title: "xxxxxxxxxxxx",
        time: "2022-02-28 15:31:56",
    },
]);

// 分页相关
const currentPage = ref(1); // 当前页码
const pageSize = ref(4); // 每页显示条数
const goToPage = ref(1); // 跳转页码

// 计算总页数
const totalPages = computed(() => {
    return Math.ceil(tableData.value.length / pageSize.value);
});

// 计算当前页显示的数据
const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});

// 方法：处理页码变化
const handlePageChange = (page: number) => {
    if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page;
    }
};

// 方法：处理每页条数变化
const handlePageSizeChange = () => {
    currentPage.value = 1; // 改变每页条数后重置到第一页
};

// 方法：跳转到指定页
const handleGoToPage = () => {
    if (goToPage.value >= 1 && goToPage.value <= totalPages.value) {
        currentPage.value = goToPage.value;
    } else {
        alert(`请输入有效的页码范围（1-${totalPages.value}）`);
    }
};

// 方法：点击详情按钮
const handleDetail = (row: any) => {
    console.log("查看详情：", row);
};

</script>

<style scoped lang="scss">
.ticket-center {
    // margin: 20px;
    // width: 672px;
    // height: 336px;
    background: rgba(41, 43, 55, 1);
    border-radius: 5px;
    height: 100%;

    // overflow: hidden;
    .contain {
        width: 100%;
        // height: 350px;
        background: rgb(0, 0, 0);
        border-radius: 10px;
        padding-top: 5px;
    }

    .tab-buttons {
        display: flex;

        .tab {
            background: none;
            border: none;
            font-size: 14px;
            color: dark;
            cursor: pointer;
            padding: 5px 10px;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s ease, color 0.3s ease;
            color: #fff;
        }

        .tab.active {
            color: rgba(39, 138, 240, 1);
        }
    }

    .search-bar {
        display: flex;
        // width: 660px;
        margin: 0 10px 10px;
        font-size: 12px;
        color: #fff;
        position: relative;

        .searchInput {
            width: 75%;
            border-radius: 5px;
            background: rgba(42, 45, 54, 1);
            margin-right: 10px;
            height: 30px;
            padding: 0 10px;
        }

        .close-button {
            position: absolute;
            top: 8px;
            left: 55%;
            font-size: 12px;
        }

        .search,
        .reset {
            // width: 50px;
            padding: 0 10px;
            height: 28px;
            text-align: center;
            border-radius: 5px;
            line-height: 28px;
            background: rgba(0, 128, 255, 1);
            margin-right: 10px;
            margin-top: 1px;
        }

        .reset {
            // width: 50px;
            background: rgba(0, 0, 0, 1);
            border: 1px solid #fff;
        }

    }

    .table {
        // width: 660px;
        // height: 140px;
        margin: 0 10px;
        border-radius: 5px;
        background: rgba(41, 43, 55, 1);
        font-size: 12px !important;
        overflow: hidden;

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 2px;
            text-align: center;
        }

        th {
            background-color: rgba(41, 43, 55, 1);
            color: #ffffff;
        }

        thead th:not(:last-child) {
            border-right: 1px solid#fff;
        }

        .even-row {
            background-color: rgba(51, 54, 67, 1);
            color: #ffffff;
        }

        .odd-row {
            background-color: rgba(51, 54, 67, 1);
            background-color: rgba(41, 43, 55, 1);
            color: #ffffff;
        }

        .detail-button {
            color: #66b1ff;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    }

    .pagination {
        margin-top: 10px;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 10px;
        color: #fff;
        padding-bottom: 10px;
        font-size: 12px;
        margin-right: 10px;

        input {
            padding: 5px;
            width: 60px;
            height: 20px;
            background: rgba(32, 38, 52, 1);
            text-align: center;
            border-radius: 5px;
        }

        .goto {
            width: 30px;
            height: 20px;
            background: rgb(0, 128, 255);
            text-align: center;
            line-height: 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        button {
            width: 20px;
            height: 20px;
            border-radius: 5px;
            background: rgba(32, 38, 52, 1);
            cursor: pointer;
        }

        button:disabled {
            cursor: not-allowed;
            color: #ccc;
            border-color: #eee;
        }
    }
}

// .ticket-center{
//   div,h2{
//     pointer-events: v-bind(pointerEvents);
//   }
// }
.ticket-center:hover {
    transform: translateY(-4px);
}

.play {
    animation: shake 0.3s infinite ease;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}

.pause {
    animation-play-state: paused;
}
</style>